$(function () {
    $('#jqGrid').jqGrid({
        // 最右边列的空白是留给鼠标滚轮轴的，改不了，除非换库。
        // 试着改了一个下午，发现这是人家故意这么写的，哎，这块花费了三天，总算把bug弄了
        colModel: [
            {label: '用户id', name: 'userId', key: true, width: 50},
            {label: '账号（手机号）', name: 'loginId', width: 100},
            {label: '昵称', name: 'userName', width: 200},
            {label: '状态', name: 'isLocked', width: 50, formatter: isLockedFormatter},
            {label: '注销', name: 'isDeleted', width: 50, formatter: isDeletedFormatter},
            {label: '注册时间', name: 'createTime'},
        ],
        cmTemplate: {align: 'center'}, // 设置列的默认对齐方式为居中
        autowidth: true, // 填充宽度到父容器
        height: 500,
        styleUI: 'Bootstrap', // 使用Bootstrap样式渲染表格
        multiselect: true, // 启用多选模式，允许用户选择多行
        rowNum: 10, // 指定初始每页显示的行数为10行
        rowList: [10, 20, 50], // 设置用户可以选择的每页行数选项
        emptyrecords: '无记录（可刷新重试）',

        url: '/admin/users/list',
        datatype: 'json',
        postData: {
            loginId: undefined, // 留着给搜索框
            userId: undefined
        },
        jsonReader: {
            root: 'data.list',
            total: 'data.totalPage',
            records: 'data.totalCount',
        },

        pager: "#jqGridPager", // 指定分页栏的容器，分页栏的内容将显示在具有该ID的元素中
        // 定义分页事件处理函数
        onPaging: function (pgButton) {
            // 检查用户点击的按钮是否是 "user"，即跳转按钮
            if (pgButton === 'user') {
                let pageInput = $(".ui-pg-input", "#gbox_" + this.id); // 获取页码输入框
                let pageValue = pageInput.val(); // 获取输入框中的值
                // 判断页码合理
                if(pageValue > $(this).jqGrid('getGridParam', 'lastpage')){
                    pageInput.val($(this).jqGrid('getGridParam', 'lastpage'));
                }
            }
        },
    });

    // 窗口变化时调整宽度
    $(window).resize(function () {
        $("#jqGrid").setGridWidth($(".card-body").width());
    });

    // 搜索账号
    $('#searchLoginId').click(function () {
        $(this).attr('disabled', true);
        // 清空id那块
        $('#inputUserId').val('');
        $("#jqGrid").jqGrid('getGridParam', 'postData').userId = undefined;
        var searchLoginId = $('#inputLoginId').val();
        if (isEmpty(searchLoginId)) {
            $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
            $("#jqGrid").jqGrid('getGridParam', 'postData').loginId = undefined;
            $("#jqGrid").trigger("reloadGrid");
        } else if (validLoginId(searchLoginId)) {
            $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
            $("#jqGrid").jqGrid('getGridParam', 'postData').loginId = searchLoginId;
            $("#jqGrid").trigger("reloadGrid");
        } else {
            toastr.warning('账号格式为11位手机号！', '警告', {timeOut: 5000});
        }
        $(this).attr('disabled', false);
    });

    // 搜索id
    $('#searchUserId').click(function () {
        $(this).attr('disabled', true);
        // 清空账号那块
        $('#inputLoginId').val('');
        $("#jqGrid").jqGrid('getGridParam', 'postData').loginId = undefined;
        var searchUserId = $('#inputUserId').val();
        if (isEmpty(searchUserId)) {
            $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
            $("#jqGrid").jqGrid('getGridParam', 'postData').userId = undefined;
            $("#jqGrid").trigger("reloadGrid");
        } else {
            $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
            $("#jqGrid").jqGrid('getGridParam', 'postData').userId = searchUserId;
            $("#jqGrid").trigger("reloadGrid");
        }
        $(this).attr('disabled', false);
    });

    // 监听解锁
    $('#confirmNotLock').click(function () {
        lockForUser(0);
    });

    // 监听锁定
    $('#confirmLock').click(function () {
        lockForUser(1);
    });

    // 监听注销
    $('#confirmDelete').click(function () {
        var selectedRows = $("#jqGrid").jqGrid('getGridParam', 'selarrrow');
        if (selectedRows.length === 0) {
            toastr.warning('未选中记录！', '警告', {timeOut: 5000});
            return;
        }
        $.ajax({
            type: 'PUT',
            url: '/admin/users/delete/1',
            contentType: "application/json", // 用json了一定要这个
            data: JSON.stringify(selectedRows), // 数组用json
            success: function (result) {
                if (result.statusCode === 200) {
                    toastr.success('修改成功！', {timeOut: 3000});
                    $("#jqGrid").jqGrid('setGridParam', {page: 1}); // 从第一页开始
                    $("#jqGrid").trigger("reloadGrid");
                } else {
                    toastr.error(result.message, {timeOut: 3000});
                }
            }
        });
    });

    // 锁定更改
    function lockForUser(lockStatus) {
        var selectedRows = $("#jqGrid").jqGrid('getGridParam', 'selarrrow');
        if (selectedRows.length === 0) {
            toastr.warning('未选中记录！', '警告', {timeOut: 5000});
            return;
        }
        $.ajax({
            type: 'PUT',
            url: '/admin/users/lock/' + lockStatus,
            contentType: "application/json", // 用json了一定要这个
            data: JSON.stringify(selectedRows), // 数组用json
            success: function (result) {
                if (result.statusCode === 200) {
                    toastr.success('修改成功！', {timeOut: 3000});
                    $("#jqGrid").trigger("reloadGrid");
                } else {
                    toastr.error(result.message, {timeOut: 3000});
                }
            }
        });
    }
});

function isLockedFormatter(cellvalue) {
    if (cellvalue === 0) {
        return '<span style="color: #28a745">' + '正常' + '</span>';
    } else {
        return '<span style="color: #6c757d">' + '锁定' + '</span>';
    }
}

function isDeletedFormatter(cellvalue) {
    if (cellvalue === 0) {
        return '<span style="color: #28a745">' + '正常' + '</span>';
    } else {
        return '<span style="color: #bd2130">' + '注销' + '</span>';
    }
}

